<style scoped lang="less">
	@import "active-select";
</style>
<template>
	<div>
		<Row>
			<Col span="24">
				<Card style="margin-bottom: 10px">
					<Form inline>
						<FormItem style="margin-bottom: 0">
							<Select v-model="searchConf.type" clearable placeholder="请选择类别" style="width:100px">
								<Option :value="1">活动标题</Option>
							</Select>
						</FormItem>
						<FormItem style="margin-bottom: 0">
							<label>
								<Input v-model="searchConf.keywords" placeholder=""></Input>
							</label>
						</FormItem>
						<FormItem style="margin-bottom: 0">
							<Button type="primary" @click="search">{{ $t('find_button') }}/{{ $t('refresh_button') }}</Button>
						</FormItem>
					</Form>
				</Card>
			</Col>
		</Row>
		<Row>
			<Col span="24">
				<Card>
					<div class="active-select-item-wrap">
						<div class="active-select-item" @click="select(tab)" v-for="tab in tableData">
							<span v-if="tab.selected" class="active-select-item-cover">
								<Icon type="md-checkmark" :size="30" color="white"/>
							</span>
							<img class="active-select-item-img" :src="GLOBAL.getUrl(tab.imgs[0],true)">
							<div class="active-select-item-title">{{tab.title}}</div>
						</div>
					</div>
					<div class="margin-top-15" style="text-align: center">
						<Page :total="tableShow.listCount" :current="tableShow.currentPage"
						      :page-size="tableShow.pageSize" @on-change="changePage"
						      @on-page-size-change="changeSize" show-elevator show-sizer show-total></Page>
					</div>
				</Card>
			</Col>
		</Row>
	</div>
</template>
<script>
  import {getList} from '@/api/active'
  import {forEach} from "../../../libs/tools";

  export default {
    name: 'active-select',
    data() {
      return {
        tableData: [],
        tableShow: {
          currentPage: 1,
          pageSize: 20,
          listCount: 0
        },
        searchConf: {
          type: '',
          keywords: ''
        },
      };
    },
    created() {
      this.getList()
    },
    props: {},
    methods: {
      changePage(page) {
        this.tableShow.currentPage = page;
        this.getList()
      },
      changeSize(size) {
        this.tableShow.pageSize = size;
        this.getList()
      },
      search() {
        this.tableShow.currentPage = 1;
        this.getList()
      },
      getList() {
        let vm = this
        let params = {
          page: vm.tableShow.currentPage,
          size: vm.tableShow.pageSize,
          type: vm.searchConf.type,
          keywords: vm.searchConf.keywords,
          select: 1
        };
        getList(params).then(response => {
          vm.tableData = [];
          forEach(response.data.data.list, (item) => {
            item.imgs = JSON.parse(item.banners);
            item.selected = false;
            vm.tableData.push(item);
          });
          vm.tableShow.listCount = response.data.data.count;
        })
      },
      select(data) {
	      data.selected = !data.selected;
        this.$emit("active-selected", {
          active_type: this.GLOBAL.TYPE_LINK_ACTIVE,
          value: data.id,
          selected: data.selected,
          img: [data.imgs[0]],
          title: data.title
        });
      }
    }
  };
</script>
